<template>
  <section class="main">
    <a-card style="margin-top: 24px" :bordered="false" title="睡眠记录">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="sleepStatusText" slot-scope="text, record">
            <a-tooltip :title="record.sleepBean.sleepRemark || ''">{{ record.sleepStatusText }}</a-tooltip>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <sleep-modal ref="modalForm" @ok="modalFormOk"></sleep-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import SleepModal from './modules/SleepModal'

const listColumns = [
  {
    title: '日期/监测项',
    align: 'center',
    dataIndex: 'recordTime'
  },
  {
    title: '睡眠情况',
    align: 'center',
    dataIndex: 'sleepStatusText',
    scopedSlots: { customRender: 'sleepStatusText' }
  }
]
export default {
  name: 'Sleep',
  mixins: [BloodProfileMixin],
  components: {
    SleepModal
  },
  data() {
    return {
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns,
      url: {
        // 按日期分组获取患者睡眠记录
        getList: '/101/10/1011002'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
.table-operator {
  margin-bottom: 10px;
}

.clName .ant-tree li span.ant-tree-switcher,
.ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890ff !important;
}
</style>

